<template>
  <view>
    <cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">处方列表</block>
    </cu-custom>
    <view class="m-all32">
      <view class="info" v-for="(item, index) in presList" :key="index">
        <view class="m-all32 p-all32">
          <view class="pb32">
            <text class="f28">处方号:{{ item.id }}</text>
          </view>
          <view class="user-bg">
            <view class="text-gray">
              <text>患者姓名:{{ item.userName }}</text>
            </view>
            <view class="mt20 text-gray">
              <text>性别:{{ item.sex == 1 ? "男" : "女" }}</text>
            </view>
            <view class="mt20 text-gray">
              <text>科室:{{ item.department ? item.department : "" }}</text>
            </view>
          </view>
          <view class="details-box">
            <view class="details" :class="'bg-' + theme.backgroundColor" @tap="goDetails(item)">
              查看详情
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="presList.length"
      :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"
    ></view>
  </view>
</template>
<script>
const app = getApp();
import api from "utils/api";

export default {
  data() {
    return {
      presList: [],
      theme: app.globalData.theme, //全局颜色变量
      page: {
        size: 8,
        current: 1,
      },
      total: 0,
      loadmore: false,
    };
  },
  onLoad(options) {
    this.getList();
  },
  onReachBottom() {
    if (this.presList.length < this.total) {
      this.page.current++;
      this.getList();
    }else{
        this.loadmore = false
    }
  },
  methods: {
    goDetails(item){
        uni.setStorageSync("hospitalObj", item);
        this.$goUrl("/pages_code/pages/details/index");
    },
    getList() {
      this.loadmore = true;
      api.qrcodePage(this.page).then((res) => {
        this.presList.push(...res.data.records);
        this.total = res.data.total;
        this.loadmore = false

      });
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  background-color: #fff;
  margin: 32rpx 0;
  border-radius: 16rpx;
  width: 100%;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .row {
    &:last-child {
      border: none;
    }
    padding: 32rpx;
    border-bottom: 2rpx solid #eaeeef;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.user-bg {
  background: #f8faff;
  padding: 32rpx;
}
.details-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.details {
  display: inline-block;
  padding: 20rpx 32rpx;
  border-radius: 80rpx;
  color: #fff;
  margin-top: 44rpx;
}
</style>
